import Vue from "vue";
import Cleave from 'cleave.js';
//import $ from 'jquery';

const TYPE_DATE = "date";
const TYPE_TIME = "time";
const TYPE_DATETIME = "datetime";

const date = Vue.directive('date', {
  bind: function (el, binding, vnode) {
    var className = el.className;
    className = className.substring(className.indexOf('r--') + 3)
    var input = getInput(el);
    input.onkeyup = function () {
      if (className === TYPE_DATE) {
        dateFmt(input);
      } else if (className === TYPE_TIME) {
        timeFmt(input);
      } else if (className === TYPE_DATETIME) {
        datetimeFmt(input);
      }
    }
  }
});

function getInput(el) {
  var inputs = el.getElementsByTagName('input');
  if (inputs && inputs.length > 0) {
    return inputs[0];
  }
}

function dateFmt(el) {
  var cleave = new Cleave(el, {
    delimiter: '-',
    blocks: [4, 2, 2]
  });
}

function timeFmt(el) {
  var cleave = new Cleave(el, {
    delimiter: ':',
    blocks: [2, 2]
  });
}

function datetimeFmt(el) {
  var cleave = new Cleave(el, {
    delimiters: ['-', '-', ' ', ':', ':'],
    blocks: [4, 2, 2, 2, 2, 2]
  });
}

export {
  date,
  // time,
  // datetime
}
